<script lang="ts" setup>
import { ref, reactive } from "vue";
const materialName = ref("");
const tableData = ref([]);
// 分页器功能
/**
 * 分页器配置
 */
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
});

const search = () => {
  console.log(materialName.value);
};

// 初始化数据
const initData = () => {
  //   getSupplierPagelist(
  //     Object.assign(
  //       {
  //         size: pagination.size,
  //         current: pagination.current
  //       },
  //       { ...applyFormRef.value.getForm() }
  //     )
  //   ).then(res => {
  //     console.log(res, "订单列表");
  //     pagination.current = res.data.current;
  //     pagination.total = res.data.total;
  //     tableData.value = res.data.records;
  //   });
};

/**
 * 分页器改变事件
 * @param value 当前页
 * @param pageSize 每页大小
 */
const handleCurrentChange = (value?: number, pageSize?: number) => {
  pagination.current = value || 1;
  pagination.size = pageSize || 20;
  initData();
};
</script>
<template>
  <div class="flex-1">
    <div class="flex flex-row items-center mb-[16px]">
      <div class="flex flex-row items-center mr-[40px]">
        <span class="mr-[8px]">物料名称</span>
        <el-input v-model="materialName" placeholder="请输入物料名称" />
      </div>
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="main">
      <el-table :data="tableData" style="width: 100%" height="271">
        <el-table-column type="selection" width="64" />
        <el-table-column prop="materialCode" label="物料编码" width="128" />
        <el-table-column prop="materialName" label="物料名称" width="136" />
        <el-table-column prop="name" label="物料性质" width="104" />
        <el-table-column prop="name" label="物资分类" width="104" />
        <el-table-column prop="materialSpecs" label="规格型号" width="200" />
        <el-table-column prop="unit" label="单位" width="80" />
      </el-table>
      <div v-if="pagination.total > pagination.size" class="pagination">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          class="el-pagination"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="pagination.total"
          @change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
